<template>
  <el-row class="mb-4">
    <el-button  @click="loadData">
      <el-icon><Refresh /></el-icon>
    </el-button>
    <el-button type="success" @click="add">添加</el-button>
    <el-button type="danger" @click="handelDel">删除</el-button>
  </el-row>


   <el-table ref="multipleTableRef" 
     @selection-change="handleSelectionChange"
     :data="state.products" 
     stripe style="width: 100%"
   >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="id" label="ID" width="100" />
    <el-table-column prop="name" label="产品名" width="180" />

    <el-table-column prop="status" label="图片" width="180" >
      <template #default="scope">
         <el-image style="width: 100px; height: 100px" :src="scope.row.image" :fit="fit" />
      </template>
    </el-table-column>
     <el-table-column prop="is_able" label="是否删除" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.is_able == -1" type="danger">已删除</el-tag>
        <el-tag v-if="scope.row.is_able == 1" type="primary">未删除</el-tag>
     </template>
    </el-table-column>
    <el-table-column prop="cate_name" label="分类名" width="180" />
     <el-table-column label="价格库存" width="180">
       <template #default="scope">
          <div>库存：{{scope.row.store}}</div>
          <div>价格：{{scope.row.price}}</div>
       </template>
     </el-table-column>
   <!--  <el-table-column prop="price" label="价格" width="180" />
    <el-table-column prop="store" label="库存" width="180" /> -->
    <el-table-column prop="status" label="状态" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.status == 1" type="primary">已上架</el-tag>
        <el-tag v-if="scope.row.status == 2" type="danger">已下架</el-tag>
     </template>
    </el-table-column>
    <el-table-column prop="status" label="是否推荐" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.is_recommend == 1" type="success">已推荐</el-tag>
        <el-tag v-if="scope.row.is_recommend == 0" type="danger">未推荐</el-tag>
     </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="180">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button link type="primary" size="small" v-if="scope.row.status == 1" @click="handleSetDown(scope.$index,scope.row)">下架</el-button>
        <el-button link type="primary" size="small" v-if="scope.row.status == 2" @click="handleSetUp(scope.$index,scope.row)">上架</el-button>
        <el-button link type="primary" size="small" v-if="scope.row.is_recommend == 0" @click="handleRecommend(scope.$index,scope.row)">设为推荐</el-button>
        <el-button link type="primary" size="small" v-if="scope.row.is_recommend == 1" @click="handleUnRecommend(scope.$index,scope.row)">取消推荐</el-button>
         <el-button link type="primary" size="small" @click="handleSetArea(scope.$index,scope.row)">设置专区</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
  background 
  layout="prev, pager, next" 
   v-model:currentPage="currentPage"
   v-model:page-size="pageSize"
  :total="state.total"  
   />


      <el-dialog v-model="visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">设置专区!</h4>
          
        </div>
      </template>
        <el-form 
          :model="state.area_form"
          label-width="120px"
          >
            <el-form-item label="选择专区" prop="area_id">
                <el-radio-group v-model="state.area_form.area_id" class="ml-4">
                            <el-radio v-for="(item,index) in state.area_lists" :label="item.id" size="large">{{item.title}}</el-radio>
                </el-radio-group>
            </el-form-item>  
          </el-form>
         <el-form-item>
          <el-button type="primary" @click="onSave(ruleRef)">更新</el-button>
          <el-button type="danger" @click="visible = false">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            关闭
          </el-button>
        </el-form-item>
    </el-dialog>
</template>



<script setup>
import { ref,reactive, onMounted,watch } from 'vue'
import {useRouter} from 'vue-router';
import {index,setDown,setUp,setRecommend,setUnRecommend,del} from '@/api/product.js';
import { ElMessage,ElMessageBox } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import {getAreaAll,setProductArea} from '../../api/area.js'

const state = reactive({
  area_lists:[],
  area_form:{},
  products:[],
  current_page:1,
  total:0
});
const multipleTableRef = ref();
const multipleSelection = ref([]);
const router = useRouter();
const pageSize = ref(10);
const currentPage =ref(1);
const visible = ref(false);
onMounted(()=>{
  loadData();
  getAreaAll().then(res=>{
    state.area_lists = res.data;
  })

});
const loadData = ()=>{
	
	index({page:currentPage.value,pageSize:pageSize.value}).then(res=>{
	  if(res.code == 200) {
			state.products = res.data.data;
		    state.total = res.data.total;
			// state.current_page = res.data.current_page;
	  }
	})
}
const add = ()=>{
    router.push('/product/add');
}
const handleClick=()=>{

}
const handleSetArea=(index,item)=>{
  state.area_form.product_id = item.id;
  visible.value = true;
}
watch(currentPage,()=>{
	loadData();
})
const handleSetDown =(index,row)=>{
  setUp({id:row.id}).then(res=>{
    if(res.code == 200) {
      state.products[index].status = 2;
    }
  })
 
}
const handleSetUp =(index,row)=>{
  setUp({id:row.id}).then(res=>{
    if(res.code == 200) {
      state.products[index].status =1;
    }
  })
}
const handleUnRecommend = (index,row)=>{
  state.products[index].is_recommend = 0;
  setUnRecommend({id:row.id}).then(res=>{
    if(res.code == 200) {
      state.products[index].is_recommend = 0;
    }

  })
}
const handleRecommend = (index,row)=>{
  setRecommend({id:row.id}).then(res=>{
    if(res.code == 200) {
      state.products[index].is_recommend = 1;
    }

  })

}
const handleEdit = (row)=>{
  router.push('/product/edit?id='+row.id);
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const handelDel = ()=>{
  let rows = multipleTableRef.value.getSelectionRows();
  let ids = [];
  rows.map(item=>{
    ids.push(item.id);
  })
  ElMessageBox.confirm("确认删除？",'Warning',{
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }).then(()=>{
      del({ids:ids}).then(res=>{
          ElMessage({
            message: '删除成功',
            type: 'success',
          });
        })
    });
}
const onSave = ()=>{
  console.log(state.area_form);
  setProductArea(state.area_form).then(res=>{

  })
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>